<template>
  <el-dialog
    :title="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    class="JADP-dialog JADP-dialog_center"
    lock-scroll
    width="600px"
  >
    <el-row :gutter="15" class="">
      <el-form
        ref="elForm"
        :model="dataForm"
        :rules="rules"
        size="small"
        label-width="100px"
        label-position="right"
        :disabled="!!isDetail"
      >
        <el-col :span="24">
          <el-form-item label="课程id" prop="curriculumid">
            <el-input
              v-model="dataForm.curriculumid"
              placeholder="请输入"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="课件id" prop="coursewareid">
            <el-input
              v-model="dataForm.coursewareid"
              placeholder="请输入"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="学员id" prop="studentid">
            <el-input
              v-model="dataForm.studentid"
              placeholder="请输入"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="学员名称" prop="studentname">
            <el-input
              v-model="dataForm.studentname"
              placeholder="请输入"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="身份证" prop="idcard">
            <el-input
              v-model="dataForm.idcard"
              placeholder="请输入"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="创建时间" prop="creatortime">
            <el-input
              v-model="dataForm.creatortime"
              placeholder="系统自动生成"
              readonly
            >
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label-width="0">
            <div class="JADP-common-title">
              <h2>课件视频学习抓拍记录</h2>
              <div class="exportAndImport btn"></div>
            </div>
            <el-table
              :data="dataForm.xy_kj_snapshot_recordsEntityList"
              size="mini"
            >
              <el-table-column
                type="index"
                width="50"
                label="序号"
                align="center"
              />
              <el-table-column prop="learncenterid" label="学习中心id">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.learncenterid"
                    placeholder="请输入"
                    clearable
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column prop="type" label="抓拍类型">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.type"
                    placeholder="请输入"
                    clearable
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column prop="verifyresults" label="验证结果">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.verifyresults"
                    placeholder="请输入"
                    clearable
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column prop="reason" label="失败原因">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.reason"
                    placeholder="请输入"
                    clearable
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column prop="verifytime" label="验证时间（拍摄时间）">
                <template slot-scope="scope">
                  <el-date-picker
                    v-model="scope.row.verifytime"
                    placeholder="请选择"
                    clearable
                    :style="{ width: '100%' }"
                    type="datetime"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="timestamp"
                  >
                  </el-date-picker>
                </template>
              </el-table-column>
              <el-table-column prop="snapshots" label="人脸认证抓拍图片">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.snapshots"
                    placeholder="请输入"
                    clearable
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column prop="photo" label="考生摄像头图片">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.photo"
                    placeholder="请输入"
                    clearable
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="50">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    class="JADP-table-delBtn"
                    @click="
                      handleDelxy_kj_snapshot_recordsEntityList(scope.$index)
                    "
                    >删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <div
              class="table-actions"
              @click="addHandlexy_kj_snapshot_recordsEntityList()"
            >
              <el-button type="text" icon="el-icon-plus">新增</el-button>
            </div>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label-width="0">
            <div class="JADP-common-title">
              <h2>课件视频学习监控操作日志</h2>
              <div class="exportAndImport btn"></div>
            </div>
            <el-table :data="dataForm.xy_kj_monitor_logEntityList" size="mini">
              <el-table-column
                type="index"
                width="50"
                label="序号"
                align="center"
              />
              <el-table-column prop="learncenterid" label="学习中心id">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.learncenterid"
                    placeholder="请输入"
                    clearable
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column prop="studentid" label="学员id">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.studentid"
                    placeholder="请输入"
                    clearable
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column prop="studentname" label="学员名称">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.studentname"
                    placeholder="请输入"
                    clearable
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column prop="operationcontent" label="操作内容">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.operationcontent"
                    placeholder="请输入"
                    clearable
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column
                prop="operationtype"
                label="操作类型 0-异常 1-正常"
              >
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.operationtype"
                    placeholder="请输入"
                    clearable
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column prop="operationtime" label="操作时间">
                <template slot-scope="scope">
                  <el-date-picker
                    v-model="scope.row.operationtime"
                    placeholder="请选择"
                    clearable
                    :style="{ width: '100%' }"
                    type="datetime"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="timestamp"
                  >
                  </el-date-picker>
                </template>
              </el-table-column>
              <el-table-column prop="remark" label="说明">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.remark"
                    placeholder="请输入"
                    clearable
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="50">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    class="JADP-table-delBtn"
                    @click="handleDelxy_kj_monitor_logEntityList(scope.$index)"
                    >删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <div
              class="table-actions"
              @click="addHandlexy_kj_monitor_logEntityList()"
            >
              <el-button type="text" icon="el-icon-plus">新增</el-button>
            </div>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <ExportBox
      v-if="xy_kj_snapshot_recordsexportBoxVisible"
      ref="xy_kj_snapshot_recordsExportBox"
      @download="xy_kj_snapshot_recordsdownload"
    />
    <ImportBoxz
      v-if="xy_kj_snapshot_recordsimportBoxVisible"
      ref="xy_kj_snapshot_recordsimportBox"
      @refresh="reset()"
      @ImportPreviewApi="xy_kj_snapshot_recordsImportPreviewApi"
      @saveData="xy_kj_snapshot_recordssaveData"
      @TemplateDownload="xy_kj_snapshot_recordsTemplateDownload"
      :URL="xy_kj_snapshot_recordsURL"
    />

    <ExportBox
      v-if="xy_kj_monitor_logexportBoxVisible"
      ref="xy_kj_monitor_logExportBox"
      @download="xy_kj_monitor_logdownload"
    />
    <ImportBoxz
      v-if="xy_kj_monitor_logimportBoxVisible"
      ref="xy_kj_monitor_logimportBox"
      @refresh="reset()"
      @ImportPreviewApi="xy_kj_monitor_logImportPreviewApi"
      @saveData="xy_kj_monitor_logsaveData"
      @TemplateDownload="xy_kj_monitor_logTemplateDownload"
      :URL="xy_kj_monitor_logURL"
    />

    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import request from "@/utils/request";
import { getDictionaryDataSelector } from "@/api/systemData/dictionary";
import { previewDataInterface } from "@/api/systemData/dataInterface";
import ExportBox from "./ExportBox";
export default {
  components: { ExportBox },
  props: [],
  data() {
    return {
      //导入属性
      xy_kj_snapshot_recordsimportBoxVisible: false,
      xy_kj_snapshot_recordsURL: "xy_kj_learn_center/Xy_kj_snapshot_records",
      xy_kj_snapshot_recordsColumnList: [
        { prop: "learncenterid", label: "学习中心id" },
        { prop: "type", label: "抓拍类型" },
        { prop: "verifyresults", label: "验证结果" },
        { prop: "reason", label: "失败原因" },
        { prop: "verifytime", label: "验证时间（拍摄时间）" },
        { prop: "snapshots", label: "人脸认证抓拍图片" },
        { prop: "photo", label: "考生摄像头图片" },
        { prop: "learncenterid", label: "学习中心id" },
        { prop: "studentid", label: "学员id" },
        { prop: "studentname", label: "学员名称" },
        { prop: "operationcontent", label: "操作内容" },
        { prop: "operationtype", label: "操作类型 0-异常 1-正常" },
        { prop: "operationtime", label: "操作时间" },
        { prop: "remark", label: "说明" }
      ],
      //导出属性
      xy_kj_snapshot_recordsexportBoxVisible: false,
      xy_kj_snapshot_recordsEntityList: [],
      //导入属性
      xy_kj_monitor_logimportBoxVisible: false,
      xy_kj_monitor_logURL: "xy_kj_learn_center/Xy_kj_monitor_log",
      xy_kj_monitor_logColumnList: [
        { prop: "learncenterid", label: "学习中心id" },
        { prop: "type", label: "抓拍类型" },
        { prop: "verifyresults", label: "验证结果" },
        { prop: "reason", label: "失败原因" },
        { prop: "verifytime", label: "验证时间（拍摄时间）" },
        { prop: "snapshots", label: "人脸认证抓拍图片" },
        { prop: "photo", label: "考生摄像头图片" },
        { prop: "learncenterid", label: "学习中心id" },
        { prop: "studentid", label: "学员id" },
        { prop: "studentname", label: "学员名称" },
        { prop: "operationcontent", label: "操作内容" },
        { prop: "operationtype", label: "操作类型 0-异常 1-正常" },
        { prop: "operationtime", label: "操作时间" },
        { prop: "remark", label: "说明" }
      ],
      //导出属性
      xy_kj_monitor_logexportBoxVisible: false,
      xy_kj_monitor_logEntityList: [],
      loading: false,
      visible: false,
      isDetail: false,
      activeName: "",
      dataForm: {
        curriculumid: undefined,
        coursewareid: undefined,
        studentid: undefined,
        studentname: undefined,
        idcard: undefined,
        creatortime: "",
        xy_kj_snapshot_recordsEntityList: [],
        xy_kj_monitor_logEntityList: [],
        organizeId:""
      },
      rules: {}
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    //导出按钮点击事件
    xy_kj_snapshot_recordsexportData() {
      this.xy_kj_snapshot_recordsexportBoxVisible = true;
      this.$nextTick(() => {
        this.$refs.xy_kj_snapshot_recordsExportBox.init(
          this.xy_kj_snapshot_recordsColumnList
        );
      });
    },
    //导出弹出层回调函数
    xy_kj_snapshot_recordsdownload(data) {
      let query = { ...data, ...this.listQuery, ...this.query,organizeId:this.$store.getters.organizeId};
      request({
        url: `/api/xy_kj_learn_center/Xy_kj_snapshot_records/Actions/Export`,
        method: "post",
        data: query
      }).then(res => {
        if (!res.data.url) return;
        window.location.href = this.define.comUrl + res.data.url;
        this.$refs.xy_kj_snapshot_recordsExportBox.visible = false;
        this.xy_kj_snapshot_recordsexportBoxVisible = false;
      });
    },
    //导入预览事件
    xy_kj_snapshot_recordsImportPreviewApi(val) {
      let query = { fileName: val ,organizeId:this.$store.getters.organizeId};
      request({
        url: `/api/xy_kj_learn_center/Xy_kj_snapshot_records/ImportPreview`,
        method: "get",
        data: query
      })
        .then(res => {
          this.xy_kj_snapshot_recordsEntityList = res.data.dataRow;
          this.$refs.xy_kj_snapshot_recordsimportBox.list = res.data.dataRow;
          this.$refs.xy_kj_snapshot_recordsimportBox.btnLoading = false;
          this.$refs.xy_kj_snapshot_recordsimportBox.active++;
        })
        .catch(() => {
          this.$refs.xy_kj_snapshot_recordsimportBox.btnLoading = false;
        });
    },
    //下载导入模板事件
    xy_kj_snapshot_recordsTemplateDownload() {
      request({
        url: `/api/xy_kj_learn_center/Xy_kj_snapshot_records/templateDownload?organizeId=${this.$store.getters.organizeId}`,
        method: "post"
      }).then(res => {
        if (!res.data.url) return;
        window.location.href = this.define.comUrl + res.data.url;
      });
    },
    //上传附件事件
    xy_kj_snapshot_recordsuploadForm() {
      this.xy_kj_snapshot_recordsimportBoxVisible = true;
      this.$nextTick(() => {
        this.$refs.xy_kj_snapshot_recordsimportBox.init(
          this.xy_kj_snapshot_recordsColumnList
        );
      });
    },
    xy_kj_snapshot_recordssaveData() {
      this.xy_kj_snapshot_recordsEntityList.map(item =>
        this.dataForm.xy_kj_snapshot_recordsEntityList.push(item)
      );
      this.$refs.xy_kj_snapshot_recordsimportBox.visible = false;
    },

    //导出按钮点击事件
    xy_kj_monitor_logexportData() {
      this.xy_kj_monitor_logexportBoxVisible = true;
      this.$nextTick(() => {
        this.$refs.xy_kj_monitor_logExportBox.init(
          this.xy_kj_monitor_logColumnList
        );
      });
    },
    //导出弹出层回调函数
    xy_kj_monitor_logdownload(data) {
      let query = { ...data, ...this.listQuery, ...this.query,organizeId:this.$store.getters.organizeId };
      request({
        url: `/api/xy_kj_learn_center/Xy_kj_monitor_log/Actions/Export`,
        method: "post",
        data: query
      }).then(res => {
        if (!res.data.url) return;
        window.location.href = this.define.comUrl + res.data.url;
        this.$refs.xy_kj_monitor_logExportBox.visible = false;
        this.xy_kj_monitor_logexportBoxVisible = false;
      });
    },
    //导入预览事件
    xy_kj_monitor_logImportPreviewApi(val) {
      let query = { fileName: val,organizeId:this.$store.getters.organizeId };
      request({
        url: `/api/xy_kj_learn_center/Xy_kj_monitor_log/ImportPreview`,
        method: "get",
        data: query
      })
        .then(res => {
          this.xy_kj_monitor_logEntityList = res.data.dataRow;
          this.$refs.xy_kj_monitor_logimportBox.list = res.data.dataRow;
          this.$refs.xy_kj_monitor_logimportBox.btnLoading = false;
          this.$refs.xy_kj_monitor_logimportBox.active++;
        })
        .catch(() => {
          this.$refs.xy_kj_monitor_logimportBox.btnLoading = false;
        });
    },
    //下载导入模板事件
    xy_kj_monitor_logTemplateDownload() {
      request({
        url: `/api/xy_kj_learn_center/Xy_kj_monitor_log/templateDownload?organizeId=${this.$store.getters.organizeId}`,
        method: "post"
      }).then(res => {
        if (!res.data.url) return;
        window.location.href = this.define.comUrl + res.data.url;
      });
    },
    //上传附件事件
    xy_kj_monitor_loguploadForm() {
      this.xy_kj_monitor_logimportBoxVisible = true;
      this.$nextTick(() => {
        this.$refs.xy_kj_monitor_logimportBox.init(
          this.xy_kj_monitor_logColumnList
        );
      });
    },
    xy_kj_monitor_logsaveData() {
      this.xy_kj_monitor_logEntityList.map(item =>
        this.dataForm.xy_kj_monitor_logEntityList.push(item)
      );
      this.$refs.xy_kj_monitor_logimportBox.visible = false;
    },

    init(id, isDetail) {
      this.dataForm.xy_kj_snapshot_recordsEntityList = [];
      this.dataForm.xy_kj_monitor_logEntityList = [];
      this.dataForm.id = id || 0;
      this.visible = true;
      this.isDetail = isDetail || false;
      this.$nextTick(() => {
        this.$refs["elForm"].resetFields();
        if (this.dataForm.id) {
          this.loading = true;
          request({
            url:
              "/api/xy_kj_learn_center/Xy_kj_learn_center/" + this.dataForm.id+`?organizeId=${this.$store.getters.organizeId}`,
            method: "get"
          }).then(res => {
            this.dataForm = res.data;
            this.dataForm.xy_kj_snapshot_recordsEntityList = this.dataForm
              .xy_kj_snapshot_recordsEntityList
              ? this.dataForm.xy_kj_snapshot_recordsEntityList
              : [];
            this.dataForm.xy_kj_monitor_logEntityList = this.dataForm
              .xy_kj_monitor_logEntityList
              ? this.dataForm.xy_kj_monitor_logEntityList
              : [];
            this.loading = false;
          });
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["elForm"].validate(valid => {
        if (valid) {
          this.dataForm.organizeId= this.$store.getters.organizeId;
          if (!this.dataForm.id) {
            request({
              url: `/api/xy_kj_learn_center/Xy_kj_learn_center`,
              method: "post",
              data: this.dataForm
            }).then(res => {
              this.$message({
                message: res.msg,
                type: "success",
                duration: 1000,
                onClose: () => {
                  (this.visible = false), this.$emit("refresh", true);
                }
              });
            });
          } else {
            request({
              url:
                "/api/xy_kj_learn_center/Xy_kj_learn_center/" +
                this.dataForm.id,
              method: "PUT",
              data: this.dataForm
            }).then(res => {
              this.$message({
                message: res.msg,
                type: "success",
                duration: 1000,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refresh", true);
                }
              });
            });
          }
        }
      });
    },
    addHandlexy_kj_snapshot_recordsEntityList() {
      let item = {
        learncenterid: undefined,

        type: undefined,

        verifyresults: undefined,

        reason: undefined,

        verifytime: undefined,

        snapshots: undefined,

        photo: undefined,

        learncenterid: undefined,

        studentid: undefined,

        studentname: undefined,

        operationcontent: undefined,

        operationtype: undefined,

        operationtime: undefined,

        remark: undefined
      };
      this.dataForm.xy_kj_snapshot_recordsEntityList.push(item);
    },
    handleDelxy_kj_snapshot_recordsEntityList(index) {
      this.dataForm.xy_kj_snapshot_recordsEntityList.splice(index, 1);
    },
    addHandlexy_kj_monitor_logEntityList() {
      let item = {
        learncenterid: undefined,

        type: undefined,

        verifyresults: undefined,

        reason: undefined,

        verifytime: undefined,

        snapshots: undefined,

        photo: undefined,

        learncenterid: undefined,

        studentid: undefined,

        studentname: undefined,

        operationcontent: undefined,

        operationtype: undefined,

        operationtime: undefined,

        remark: undefined
      };
      this.dataForm.xy_kj_monitor_logEntityList.push(item);
    },
    handleDelxy_kj_monitor_logEntityList(index) {
      this.dataForm.xy_kj_monitor_logEntityList.splice(index, 1);
    }
  }
};
</script>
